<template>
  <el-container>
    <div class='avatar_box'>
      <div id='image'>
        <span :class='["iconfont image", headIcon]' :style='{color:stateColor}'></span>
      </div>
      <div id='font'>
        <span class='font' :style='{color:stateColor}'>Login</span>
      </div>
    </div>

    <div class='login_box'>
      <el-form :model='loginForm' class='login_form' ref='loginFormRef' :rules='loginFormRules'>
        <!-- 用户 id -->
        <el-form-item label-width='0px' prop='userID'>
          <el-input back v-model='loginForm.userID' placeholder='工人ID' class='worker-login'></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label-width='0px' prop='password'>
          <el-input
            v-model='loginForm.password'
            show-password
            placeholder='密码'
            class='worker-login'
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label-width='0px' class='login-code' prop='Ucode'>
          <el-input
            placeholder='请输入验证码'
            @keyup.enter.native='loginValidate'
            class='login-code-imput worker-login'
            v-model='loginForm.Ucode'
          ></el-input>
          <el-image :src='imageURL' class='login-code-img' @click='getUtils'></el-image>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item label-width='50%' class='btns'>
          <el-button type='primary' @click='loginValidate()'>Login</el-button>
        </el-form-item>
        <!-- 去注册 -->
        <el-form-item label-width='50%' class='text-link'>
          <el-button class='text-button' type='text' @click='goToHome()'>Go to Home</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-container>
</template>

<script>
export default {
  created() {
    this.getUtils()
  },
  data() {
    return {
      loginForm: {
        userID: 'worker',
        password: 'worker',
        Ucode: ''
      },
      loginFormRules: {
        userID: [{ required: true, message: '不要空着噢', trigger: 'blur' }],
        password: [
          { required: true, message: '不要空着噢', trigger: 'blur' },
          // trigger: 'blur' 是失去焦点触发，change 是改变后触发
          { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
        ],
        Ucode: [{ required: true, message: '不要空着噢', trigger: 'blur' }]
      },
      imageURL: '',
      headIcon: 'icon-dai',
      stateColor: '#fff'
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    getUtils() {
      const uuid = new Date().getTime()
      sessionStorage.setItem('uuid', uuid)
      this.$http
        .get('utils/code', {
          params: {
            uuid: uuid
          },
          responseType: 'blob'
        })
        .then(response => {
          this.imageURL = window.webkitURL.createObjectURL(response.data)
        })
        .catch(error => {
          console.error(error)
          return this.$message.error('获取验证码错误')
        })
    },
    // 登录验证
    loginValidate() {
      const that = this
      this.$refs.loginFormRef.validate(async validate => {
        const uid = sessionStorage.getItem('uuid')
        // const that = this

        if (!validate) {
          return this.$message.error('请把信息填写完整！')
        }

        // 发起axios请求
        await that.$http
          .post('/worker/login', {
            workId: that.loginForm.userID, // 表单参数 3个
            password: that.loginForm.password,
            codevalue: that.loginForm.Ucode,
            uuid: uid // 时间戳参数
          })
          .then(res => {
            that.$message.success({ message: '登录成功', duration: 500 })
            // 更换为笑脸
            that.stateColor = 'rgb(129 228 100)'
            that.headIcon = 'icon-zhayan'
            window.localStorage.setItem('worker-token', res.data.data.token)
            // 等待 0.5 秒再进去
            setTimeout(() => {
              this.$router.push('/worker')
            }, 500)
          })
          .catch(error => {
            if (error.response.data.message === 'image code error') {
              return that.$message.error('验证码错误')
            }
            // 更换为失败脸
            that.headIcon = 'icon-kulian1'
            that.stateColor = 'rgb(224 93 93)'
            return that.$message.error('输入账户或密码有误')
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(40deg, #f99e43, #fdf07c);
  position: relative;
}

/** 头像区域 */
.avatar_box {
  width: 100%;
  height: 30%;
  display: block;
  /** 要解决位置塌陷的问题：元素脱离文档流引发父级边框塌陷问题 */
  #image {
    height: 50%;
    width: 100%;
    position: relative;
    top: 10%;
    .image {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      font-size: 100px;
    }
  }

  #font {
    top: 15%;
    width: 100%;
    position: relative;
    .font {
      position: absolute;
      transform: translate(-50%, 0);
      left: 50%;
      top: 10%;
      font-size: 25px;
    }
  }
}

/** el-input__icon el-icon-view el-input__clear */
.login_box {
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: 0%;
  .login_form {
    bottom: 0;
    width: 80%;
    height: 100%;
    position: absolute;
    left: 10%;
    .el-form-item {
      margin-bottom: 12px;
    }
  }

  .login-code {
    width: 50%;
    position: relative;

    .login-code-img {
      position: absolute;
      margin-left: 20%;
      width: 80%;
      height: 60px;
      border-radius: 5px;
    }
  }

  /* 登陆页的输入框样式 */
  .worker-login /deep/ .el-input__inner {
    height: 60px;
    background-color: #d17e3633 !important;
    border: 1px solid #dcdfe600;
    /* 字体颜色 */
    color: #fff;
  }

  // 这里面一块都是 placeholder 的字体颜色
  .worker-login /deep/ input::-webkit-input-placeholder {
    color: #fff496;
  }

  .worker-login /deep/ input::-webkit-input-placeholder {
    color: #fff496;
  }
  .worker-login /deep/ input::-moz-input-placeholder {
    color: #fff496;
  }
  .worker-login /deep/ input::-ms-input-placeholder {
    color: #fff496;
  }

  .worker-login /deep/ .el-input__clear {
    color: #f4964e;
  }

  .btns /deep/ .el-form-item__content {
    height: 100%;
  }

  .btns {
    margin-bottom: 5px;
    height: 30%;
    width: 100%;
    position: relative;

    .el-button {
      position: absolute;
      transform: translate(-50%, 0);
      width: 300px;
      height: 50px;
      background-color: white;
      color: #fdb47c;
      border: 1px solid #dcdfe600;
      bottom: 0%;
      box-shadow: 0 5px 5px rgba(56, 56, 56, 0.397);
    }
  }

  .text-link {
    height: 10%;
    width: 100%;
    .text-button {
      position: absolute;
      top: 100%;
      font-size: 15px;
      transform: translate(-50%, 50%);
      top: 100%;
      color: white;
    }
  }
}
</style>
